<template>
  <div>
    <el-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-table ref="userTable" height="500" v-loading="loading" :data="deptList" highlight-current-row
            @current-change="changeCurrentUser" @selection-change="handleSelectionChange" row-key="applyWorkSettingId"
            :default-expand-all="isExpandAll" :tree-props="{ children: 'applyWorkSettings', hasChildren: 'hasChildren' }">
            <el-table-column width="55" type="selection" />
            <el-table-column prop="content" label="内容"></el-table-column>
            <el-table-column prop="sort" label="排序"></el-table-column>
            <el-table-column label="编码" prop="type" align="center">
            </el-table-column>
          </el-table>

        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
        <el-button type="primary" @click="submitUserData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { selectUser, deptTreeSelect, userSelect } from "@/api/system/user";
import {
  listCertType,
} from "@/api/system/applyBusiness.js";
export default {
  props: {
    disabled: {
      type: Boolean,
      default: false,
    },
    value: [String, Object, Array],
    open: {
      type: Boolean,
      default: false,
    }
  },
  data() {
    return {
      // 是否展开，默认全部展开
      isExpandAll: true,
      deptProps: {
        children: "children",
        label: "label",
      },
      modalOpen: this.open,
      title: "申请业务范围",
      deptOptions: [],
      nextUser: [],
      userLoading: false,
      // queryParams1: {
      //   nickName: "",
      //   phonenumber: "",
      //   pageSize: 10,

      //   deptId: undefined,
      // },
      userMultipleSelection: [],
      // 部门名称
      deptName: undefined,
      userList: [],
      // currentRow: {
      //   nickName: "",
      // },
      total: "",
    };
  },
  watch: {
    open(newVal) {
      this.modalOpen = newVal; // 将data属性的值与prop的值保持同步
    },
    value: {
      handler(val) {
        console.log("11");
      },
      deep: true,
      immediate: true,
    },
   
  },
  mounted() {
    this.getList();
  },
  methods: {
    close() {
      this.modalOpen = false; // 修改data属性的值，而不是直接修改prop
    },
    onSelectNextUsers() {
      this.open = true;
      // this.onSelectUsers("人员");
    },
    // onSelectUsers(title) {
    //   // this.getTreeSelect();
    //   // this.getListUser();
    //   this.open = true;
    //   console.log(this.open);
    // },
    /** 查询资格证书列表 */
    getList() {
      this.loading = true;
      // this.queryParams.type = this.type;
      listCertType().then((response) => {
        this.deptList = this.handleTree(response.data, "applyWorkSettingId");
        console.log(this.deptList);
        this.loading = false;
      });
    },
    changeCurrentUser(val) {
      console.log(val);
      this.currentUserId = val.userId;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.userMultipleSelection = selection;
    },
    submitUserData() {
      // if (
      //   !this.userMultipleSelection ||
      //   this.userMultipleSelection.length <= 0
      // ) {
      //   this.$modal.msgError("请选择用户");
      //   return false;
      // }
      this.$emit("change", this.userMultipleSelection);
      // this.nextUser = this.userMultipleSelection;
      // let userIds = this.userMultipleSelection.map((k) => k.userId);
      // console.log(userIds);
      this.$emit("input", userIds);
      this.modalOpen = false; // 修改data属性的值，而不是直接修改prop
    },
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-input__inner {
  cursor: pointer;
}

.button-new-tag {
  margin-left: 10px;
}

.el-tag+.el-tag {
  margin-left: 10px;
}
</style>
